<template>
  <!-- 知识类型新增修改弹窗 -->
  <el-dialog
    :title="dailogType==='add'?'新增知识内容':'知识内容编辑'"
    :visible.sync="dialogVisible"
    :show-close="false"
    :before-close="closeDailog"
    :close-on-click-modal="false"
  >
    <FormContainer :column="2">
      <el-form ref="form" :model="formData" :rules="formRules" label-width="100px">
        <el-form-item prop="title" label="知识标题">
          <el-input v-model="formData.title" placeholder="请输入知识标题" clearable />
        </el-form-item>
        <el-form-item prop="type" label="知识类型名称">
          <SearchSelectPicker
            url="call-center/api/v1/knowledgeType/page"
            placeholder="请选择知识类型名称"
            lable-name="typeName"
            :value.sync="formData.type"
            :lable.sync="formData.typeName"
          ></SearchSelectPicker>
        </el-form-item>
        <el-form-item prop="keywordStr" label="关键字">
          <el-input v-model.trim="formData.keywordStr" placeholder="多个关键字以逗号隔开" clearable />
        </el-form-item>
        <el-form-item prop="organizationCode" label="使用业务组">
          <SearchSelectPicker
            ref="deptCodeSelect"
            url="/call-center/api/v1/businessGroup/page"
            placeholder="请选择使用业务组"
            lable-name="groupName"
            value-name="groupNo"
            multiple
            :lable.sync="formData.organizationName"
            :value.sync="formData.organizationCode"
          ></SearchSelectPicker>
        </el-form-item>
        <el-form-item prop="isAuditRequired" label="是否需要审核">
          <el-select v-model="formData.isAuditRequired">
            <el-option label="是" :value="1" />
            <el-option label="否" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="formData.isAuditRequired===1"
          prop="auditor"
          label="审核人"
        >
          <SearchSelectPicker
            ref="auditorSelect"
            url="/call-center/api/v1/staffInfo/page"
            placeholder="请选择审核人"
            value-name="accountNo"
            lable-name="staffName"
            :lable.sync="formData.auditorName"
            :value.sync="formData.auditor"
          ></SearchSelectPicker>
        </el-form-item>
        <el-form-item :span="24" label="附件">
          <!-- 上传附件 -->
          <DialogUpload
            v-if="bol"
            multiple
            title="附件"
            text="附件"
            :auto-upload="false"
            :exist-file-list="existFileList"
            :on-change="onChange"
            :on-remove="removeHandler"
            @on-preview="previewHandler"
          />
        </el-form-item>
        <el-form-item :span="24" prop="content" label="知识内容">
          <el-input v-model="formData.content" type="textarea" :autosize="{minRows: 5}" clearable />
        </el-form-item>
      </el-form>
    </FormContainer>
    <span slot="footer" class="dialog-footer">
      <Button @click="closeDailog">取消</Button>
      <Button type="primary" :loading="loading" @click="confrim">{{ dailogType==='0'?'创建':'保存' }}</Button>
    </span>
  </el-dialog>
</template>
<script>
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import DialogUpload from '@/components/Upload/DialogUpload'
import SearchSelectPicker from '@/components/SearchSelectPicker'
import { contentAdd, contentUpdate } from '@/api/knowledgeBase'
import { deepCopy } from '@/utils'
export default {
  name: 'KnowledgeTypeEdit',
  components: {
    FormContainer,
    Button,
    DialogUpload,
    SearchSelectPicker
  },
  props: {
    dailogType: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      bol: false,
      dialogVisible: false,
      selectLoading: false,
      loading: false,
      delList: [],
      formData: {},
      existFileList: [], // 文件列表
      formRules: {
        title: {
          required: true,
          message: '请输入知识标题',
          trigger: 'blur'
        },
        type: {
          required: true,
          message: '请选择标题类型',
          trigger: 'change'
        },
        organizationCode: {
          required: true,
          message: '请选择标使用业务组',
          trigger: 'blur'
        },
        isAuditRequired: {
          required: true,
          message: '请选择是否需要审核',
          trigger: 'change'
        },
        auditor: {
          required: true,
          message: '请选择审核人',
          trigger: 'change'
        },
        content: {
          required: true,
          message: '请输入知识内容',
          trigger: 'blur'
        }
      }
    }
  },
  mounted() {},
  methods: {
    // 打开弹窗
    openDailog(data) {
      this.dialogVisible = true
      if (data) {
        // 角色值转换为Number数组
        const organizationList = data.organizationCode
          ? data.organizationCode.split(',')
          : []
        for (const i in organizationList) {
          organizationList[i] = Number(organizationList[i])
        }
        data.organizationCode = organizationList
        data.organizationName = data.organizationName.split(',')
        // 文件列表赋值
        const list = []
        data.annexList.forEach(e => {
          list.push({
            url: e.filePath,
            name: e.fileName,
            ...e
          })
        })
        this.existFileList = list
        this.formData = data
      } else {
        this.formData = {
          title: '',
          type: '',
          keywordStr: '',
          organizationCode: [],
          examinePeople: '',
          isAuditRequired: '',
          content: '',
          auditor: '',
          auditorName: ''
        }
        this.$nextTick(() => {
          this.$refs.form.clearValidate()
        })
      }
      this.bol = true
    },
    closeDailog() {
      this.existFileList = []
      this.delList = []
      this.bol = false
      this.$refs.form.resetFields()
      this.dialogVisible = false
    },
    // 确定按钮
    confrim() {
      this.loading = true
      this.$refs.form.validate(valid => {
        if (!valid) {
          this.loading = false
          return
        }
        const tempForm = deepCopy(this.formData)
        const reqData = new FormData()
        // files参数处理
        const addList = []
        this.existFileList.forEach((e, i) => {
          if (e.raw) {
            reqData.append('files', e.raw)
            addList.push(e)
          }
        })
        if (addList.length === 0) {
          reqData.append('files', JSON.stringify('{}'))
        }
        tempForm.deleteAnnex = this.delList
        delete tempForm.annexList

        tempForm.organizationName = tempForm.organizationName.join(',')
        tempForm.organizationCode = tempForm.organizationCode.join(',')
        if (tempForm.isAuditRequired === 0) {
          tempForm.auditor = ''
          tempForm.auditorName = ''
          tempForm.state = 2
        }
        reqData.append('json', JSON.stringify(tempForm))
        this.dailogType === '0' ? this.add(reqData) : this.update(reqData)
      })
    },
    // 新增
    add(reqData) {
      contentAdd(reqData)
        .then(res => {
          this.loading = false
          if (res.success === 1) {
            this.$message({
              type: 'success',
              message: '知识内容添加成功!'
            })
            this.closeDailog()
            this.$emit('confrim')
          }
        })
        .catch(er => { this.loading = false })
    },
    // 编辑
    update(reqData) {
      contentUpdate(reqData)
        .then(res => {
          this.loading = false
          if (res.success === 1) {
            this.$message({
              type: 'success',
              message: '知识内容修改成功!'
            })
            this.closeDailog()
            this.$emit('confrim')
          }
        })
        .catch(er => {
          this.loading = false
        })
    },
    // 文件列表变化
    onChange(file, fileList) {
      this.existFileList = fileList
    },
    // 文件移除
    removeHandler(file, fileList) {
      if (file.id) {
        this.delList.push(file.id)
      }
      this.existFileList = fileList
    },
    // 点击列表文件下载
    previewHandler(file) {
      alert('12312')
      return
    }
  }
}
</script>
<style lang='scss' module>
</style>
